import { Card, Grid, List, NavBar } from 'antd-mobile';
import dayjs from 'dayjs';
import { history, useSearchParams } from 'umi';

const RankDetail = () => {
  const [searchParams] = useSearchParams();
  const data = searchParams.get('data');
  const startTime = searchParams.get('startTime');
  const endTime = searchParams.get('endTime');
  const type = searchParams.get('type');

  let rank = [];
  if (data) {
    rank = JSON.parse(data as string);
  }
  const back = () => {
    history.go(-1);
  };
  return (
    <div style={{ width: '100%', marginBottom: '3rem' }}>
      <NavBar style={{ backgroundColor: '#fff' }} back="返回" onBack={back}>
        {type === '1' ? '收入' : '支出'}排行
      </NavBar>
      <div style={{ padding: '10px' }}>
        <Card bodyStyle={{ width: '100%', fontSize: '1rem' }}>
          <Grid columns={2} gap={1}>
            <Grid.Item span={2} style={{ fontWeight: 'bold' }}>
              {`${startTime} ~ ${endTime}`}
            </Grid.Item>
          </Grid>
        </Card>
        <Card style={{ width: '100%', marginTop: '10px' }}>
          <List>
            {rank.map((item) => (
              <List.Item
                key={item.id}
                onClick={() => {
                  history.push(`/billDetail?id=${item.id}`);
                }}
              >
                <Grid columns={4}>
                  <Grid.Item span={3}>
                    <div>{dayjs(item.payTime).format('YYYY年MM月DD日')}</div>
                    <div
                      style={{
                        fontSize: '0.9rem',
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                      }}
                    >
                      {item.notes}
                    </div>
                  </Grid.Item>
                  <Grid.Item
                    span={1}
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'right',
                      fontWeight: 'bold',
                    }}
                  >
                    {item.money}
                  </Grid.Item>
                </Grid>
              </List.Item>
            ))}
          </List>
        </Card>
      </div>
    </div>
  );
};

export default RankDetail;
